<!-- 商品列表 -->
<template>
    <el-card class="card-bottom">
        <FormTable :parameter="parameter" :formList="formList" @onquery="onquery" @onReset="onReset"></FormTable>
    </el-card>
    <el-card>
        <el-descriptions title="文章列表">
            <template #extra>
                <el-button @click="add" type="primary">添加商品</el-button>
            </template>
        </el-descriptions>
        <PageTable ref="tableRef" :column="column" :parameter="parameter" :query="GetGoodsListListApi">
            <template #isPresell="{ row }">
                <div v-if="!row.isPresell" class="balanceType"
                    :style="{ color: balanceTypeObj[row.isPresell]?.color, backgroundColor: balanceTypeObj[row.isPresell]?.bgk }">
                    {{ balanceTypeObj[row.isPresell]?.text }}
                </div>
                <el-tooltip v-else :content="row.presellTime" placement="bottom" effect="light">
                    <div class="balanceType"
                        :style="{ color: balanceTypeObj[row.isPresell]?.color, backgroundColor: balanceTypeObj[row.isPresell]?.bgk }">
                        {{ balanceTypeObj[row.isPresell]?.text }}
                    </div>
                </el-tooltip>
            </template>
            <template #titleImage="{ row }">
                <el-image :preview-src-list="[row.titleImage]" :preview-teleported="true" style="width: 50px; height: 50px"
                    :src="row.titleImage" />
            </template>
            <template #action="{ row }">
                <el-button @click="edit(row)" type="primary" link> 详情 </el-button>
                <el-button @click="edit(row)" type="primary" link> 编辑 </el-button>
                <el-button @click="del(row.articleId)" type="danger" link> 删除 </el-button>
            </template>
        </PageTable>
    </el-card>
</template>

<script setup>
import { reactive, ref, defineComponent } from "vue";
import FormTable from '@/components/FormTable'
import PageTable from '@/components/PageTable'
import { ElMessage, ElMessageBox } from 'element-plus'
import { GetGoodsListListApi, GetClassifyListListApi } from "@/api/GoodsList";
import { useRouter } from "vue-router";


defineComponent({
    components: {
        FormTable,
        PageTable,
    }
})

const balanceTypeObj = {
    false: {
        text: '现货',
        color: '#409EFF',
        bgk: '#D9ECFF',

    },
    true: {
        text: '预售',
        color: '#E6A23C',
        bgk: '#FAECD8',
    },
}


const positionType = ref([])
//商品分类列表查询(下拉框)
async function GetClassifyListList() {
    const res = await GetClassifyListListApi()
    res.data.forEach(item => {
        positionType.value.push({
            value: item.classifyId,
            label: item.classifyName
        })
    })
}
GetClassifyListList()

const parameter = reactive({
    goodsTitle: null,
    classifyId: null,
    goodsStatus: null
})
const AddDialog = ref(false)


const formList = ref([
    {
        type: 'input',
        label: '商品名称',
        code: 'goodsTitle',
    },

    {
        type: 'select',
        label: '商品分类',
        options: positionType,
        code: 'classifyId',
    },
    {
        type: 'select',
        label: '商品状态',
        options: [
            { label: '商城商品', value: 1 },
            { label: '盲盒/爆团奖品', value: 2 },
            { label: '全部', value: 3 },
        ],
        code: 'goodsStatus',
    },
    {
        type: 'picker',
        label: '入库时间',
        code: 'createTime',
    },
])

const column = [
    { type: 'selection' },
    { label: '商品名称', prop: 'goodsTitle' },
    { label: '商品图片', slots: 'titleImage' },
    { label: '商品分类', prop: 'classifyName' },
    { label: '商品价格', prop: 'sellingPrice' },
    { label: '成本价', prop: 'costPrice' },
    { label: '回收价', prop: 'recoveryPrice' },
    { label: '商品状态', slots: 'isPresell' },
    { label: '入库日期', prop: 'createTime' },
    { label: '操作', slots: 'action' },
]

// 搜索条件查询
const tableRef = ref()
function onquery() {
    tableRef.value.refresh()

}
function onReset() {
    parameter.articleTitle = null
    parameter.labelId = null
    parameter.articleStatus = null
    tableRef.value.refresh(true)
}

const router = useRouter()
//添加商品
function add() {
    router.push({ path: '/warehouse/goods/add-page' })
}




//删除按钮
async function del(id) {
    ElMessageBox.confirm(
        '确认删除吗?',
        '删除',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async () => {
        // await DelArticleApi(id)
        ElMessage({
            message: '删除成功',
            type: 'success',
        })
        tableRef.value.refresh()
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '取消成功',
        })
    })
}


//编辑
function edit(row) {

}
</script>

<style scoped lang="scss">
.balanceType {
    width: 44px;
    height: 24px;
    border-radius: 4px;
    text-align: center;
    line-height: 24px;
}
</style>